<template>
  <base-chart
    :option="option"
    @chartClick="$emit('chartClick', $event)"
  ></base-chart>
</template>

<script>
import BaseChart from "../components/BaseChart";

export default {
  name: "Base",
  props: {
    dataset: {
      type: Object,
      default: () => ({
        dimensions: [],
        source: [],
        option: {}, // 图表自定义配置项
      }),
    },
  },
  data() {
    return {};
  },
  components: {
    BaseChart,
  },
  methods: {
    handleData(dataset) {
      // console.log(dataset);
      const { dimensions, source } = dataset;
      let xField = dimensions[0];
      let yFields =
        dimensions.length > 1 ? dimensions.slice(1, dimensions.length) : [];

      let xData = source.reduce((r, c) => {
        r.push(c[xField]);
        return r;
      }, []);
      let yDatas = yFields.reduce((r, c) => {
        r.push({
          name: c,
          data: source.reduce((sr, sc) => {
            sr.push(sc[c]);
            return sr;
          }, []),
        });
        return r;
      }, []);

      let simpleData = source.reduce((r, c) => {
        r.push(c);
        return r;
      }, []);

      return {
        xData,
        yDatas,
        simpleData,
      };
    },
  },
  computed: {
    option: function () {
      return {
        ...this.defaultOption,
        dataset: this.dataset,
      };
    },
  },
};
</script>
